@extends('layouts.option_nav')
@section('content')
		<div id="statistics">
            <input type="hidden" id="product_id" value="{{ $product_id }}">
			<div class="line">
				<div id="polyline"></div>
				<div class="line_parameter">
					<div class="parameter_box">
						<p class="title">Graphic Tools</p>
						<div class="parametric_btn">
							<button id="auto" xAxisMin="" xAxisMax="" yAxisMin="" yAxisMax="" onclick="backAuto();">Auto Plot Range</button>
							<button id="zoomIn" Max="" Min=""  YMax="" YMin="" onclick="zoomIn(this);">Zoom In</button>
							<button id="zoomOut" Max="" Min=""  YMax="" YMin="" onclick="zoomOut(this);">Zoom Out</button>
							<!--<button id="auto" xAxisMin="" xAxisMax="" yAxisMin="" yAxisMax="" onclick="backAuto();">Auto Plot Range</button>-->
<!--							<button onclick="changeXaxis();">Update</button>-->
						</div>
						<div class="parametric_list">
							<div class="p_li">
								<span>MaxX Range:</span>
								<input value="0" type="text" id="lineMaxRange">
							</div>
							<div class="p_li">
								<span>MinX Range:</span>
								<input value="0" type="text" id="lineMinRange">
							</div>
							<div class="p_li">
								<span>MaxY Range:</span>
								<input value="0" type="text" id="lineMaxYRange">
							</div>
							<div class="p_li">
								<span>MinY Range:</span>
								<input value="0" type="text" id="lineMinYRange">
							</div>
							<div class="parametric_btn_align">
								<button onclick="changeXaxis();">Update</button>
							</div>
							<div class="p_li tiper">
								<span class="Max_Profit">Chart Max Profit:<a id="Max_Profit"></a></span>
							    <span class="Max_Loss">Chart Max Loss:<a id="Max_Loss"></a></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		 @include('home._form_jsonExport')
	    @include('home.tabulation_one')
	    @include('home.tabulation_two')
		</div>
		<div id="editBox" class="editBox dpn">
			<div class="oneEdit">
			   <a class="closeBox" onclick="cancelEdit();">X</a>
			   <p>Change Parameters</p>
			   <form class="oneEdit_form dpn">
          @csrf
			   	    <input type="hidden" name="id" />
                    <div class="list">
                   	    <span>Product:</span>
                   	    <select name="Product">
                   	   	   <option>MCH</option>
                   	   	   <option>MHI</option>
                   	    </select>
                    </div>
                    <div class="list">
                   	    <span>Trading Date:</span>
                   	    <input type="date" name="TradingDate">
                    </div>
                    <div class="list">
                   	    <span>Exercise Price:</span>
                   	    <input type="text" name="ExercisePrice"/>
                    </div>
                    <div class="list">
                   	    <span>Call/Put:</span>
                   	    <select name="CallPut">
                   	   	   <option>Call</option>
                   	   	   <option>Put</option>
                   	    </select>
                    </div>
                    <div class="list">
                   	    <span>Long/Short:</span>
                   	    <select name="LongShort">
                   	   	   <option>Long</option>
                   	   	   <option>Short</option>
                   	    </select>
                    </div>
                    <div class="list">
                   	    <span>Premium:</span>
                   	    <input type="text" name="Premium"/>
                    </div>
                    <div class="list">
                   	    <span>Qty:</span>
                   	    <input type="text" name="Qty"/>
                    </div>
                    <div class="list">
                   	    <span>——:</span>
                   	    <select name="Ultimate">
                   	   	   <option></option>
                   	   	   <option>A</option>
                   	   	   <option>B</option>
                   	   	   <option>C</option>
                   	   	   <option>D</option>
                   	   	   <option>E</option>
                   	   	   <option>F</option>
                   	   	   <option>G</option>
                   	   	   <option>H</option>
                   	   	   <option>I</option>
                   	   	   <option>J</option>
                   	   	   <option>K</option>
                   	   	   <option>L</option>
                   	   	   <option>M</option>
                   	   	   <option>N</option>
                   	   	   <option>O</option>
                   	   	   <option>P</option>
                   	   	   <option>Q</option>
                   	   	   <option>R</option>
                   	   	   <option>S</option>
                   	   	   <option>T</option>
                   	    </select>
                    </div>
                    <input type="button" id="oneTable_sbutton" class="editRow dpn" value="Edit" onclick="editOneTable(1);" />
                    <input type="button" class="addRow dpn" value="Add"  onclick="editOneTable(0);"/>
			   </form>

			   <form class="twoEdit_form dpn">
                    <input type="hidden" name="id">
			   	    <div class="list">
                   	    <span>Product:</span>
                   	    <select name="Product">
                   	   	   <option>MCH</option>
                   	   	   <option>MHI</option>
                   	    </select>
                    </div>
                    <div class="list">
                   	    <span>Trading Date:</span>
                   	    <input type="date" name="TradingDate"/>
                    </div>
                    <div class="list">
                   	    <span>Long/Short:</span>
                   	    <select name="LongShort">
                   	   	   <option>Long</option>
                   	   	   <option>Short</option>
                   	    </select>
                    </div>
                    <div class="list">
                   	    <span>ExercisePrice:</span>
                   	    <input type="text" name="ExercisePrice"/>
                    </div>
                    <div class="list">
                   	    <span>Qty:</span>
                   	    <input type="text" name="Qty"/>
                    </div>
                    <div class="list">
                   	    <span>——:</span>
                   	    <select name="Ultimate">
                   	   	   <option></option>
                   	   	   <option>A</option>
                   	   	   <option>B</option>
                   	   	   <option>C</option>
                   	   	   <option>D</option>
                   	   	   <option>E</option>
                   	   	   <option>F</option>
                   	   	   <option>G</option>
                   	   	   <option>H</option>
                   	   	   <option>I</option>
                   	   	   <option>J</option>
                   	   	   <option>K</option>
                   	   	   <option>L</option>
                   	   	   <option>M</option>
                   	   	   <option>N</option>
                   	   	   <option>O</option>
                   	   	   <option>P</option>
                   	   	   <option>Q</option>
                   	   	   <option>R</option>
                   	   	   <option>S</option>
                   	   	   <option>T</option>
                   	    </select>
                    </div>
                  <!--  <input type="submit" id="twoTable_sbutton" value="Edit"/>-->
                    <input type="button" id="twoTable_sbutton" class="editTwoRow dpn" value="Edit" onclick="editTwoTable(1);"/> <!---->
                    <input type="button" class="addTwoRow dpn" value="Add" onclick="editTwoTable(0);"/> <!---->
			   </form>
			</div>
		</div>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	    <script type="text/javascript" src="{{asset('js/option.js')}}" ></script>
	@endsection
